<template>
	<view class="dialog-container">
		<!-- 使用 uni-popup 作为弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" :title="title" :duration="0" :before-close="true" @close="close">
				<view class="dialog-body">
					<form>
						<!-- 部门选择 -->
						<view class="form-item">
							<text class="form-label">选择部门</text>
							<picker mode="selector" :range="departments" range-key="deptName"
								@change="handleDepartmentChange">
								<view class="picker">
									{{ submitFormData.department ? submitFormData.department : '请选择部门' }}
								</view>
							</picker>
						</view>

						<!-- 抄送人选择 -->
						<view class="form-item">
							<text class="form-label">选择抄送人</text>
							<picker mode="selector" :range="users" range-key="nickName" @change="handlePersonSelect">
								<view class="picker">
									{{ submitFormData.ccPerson ? submitFormData.ccPerson.nickName : '请选择抄送人' }}
								</view>
							</picker>
						</view>

						<!-- 已选抄送人展示 -->
						<view class="form-item">
							<text class="form-label">已选抄送人</text>
							<view class="tags-container">
								<view v-for="(person, index) in selectedPersons" :key="person.userId"
									class="person-tag">
									<text class="tag-content">
										{{ person.deptName }} - {{ person.nickName }}
									</text>
									<text class="close-icon" @click="removeSelectedPerson(index)">×</text>
								</view>
							</view>
						</view>
					</form>
				</view>
				<view class="dialog-footer">
					<button class="dialog-button cancel" @click="close">取 消</button>
					<button class="dialog-button confirm" @click="submitConfirmed">确 定</button>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		add,
		list,
		update,
		checkContractNo,
		delContract,
		killContract,
		getTaskFiles,
		selectDeptTree,
		selectUserByDeptId,
		toExamine,
		selectDetectionCategory,
		selectTestItems,
		selectCcName

	} from "@/api/mobilebusiness";
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@dcloudio/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue';

	export default {
		props: {
			businessType: { // 新增的 prop  
				type: String,
				required: true, // 该 prop 是必填项  
			},
			taskId: { // 新增的 prop
				type: String,
				required: true, // 该 prop 是必填项  
			},
			toExamineType: { // 新增的 prop
				type: String,
				required: true, // 该 prop 是必填项  
			},
			submitForm: { // 新增的 prop
				type: String,
				required: true, // 该 prop 是必填项  
			},
			title: {
				type: String,
				default: "提交确认",
			},
			visible: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				submitFormData: {
					department: '',
					ccPerson: null,
				},
				selectedPersons: [],
				departments: [], // 部门列表  
				users: [], // 用户列表  
			};
		},
		mounted() {
			this.getDeptList(); // 页面渲染前获取部门列表  
		},
		watch: {
			visible(newValue) {
				if (newValue) {
					this.open();
				} else {
					this.close();
				}
			},
		},
		methods: {
			open() {
				this.$refs.popup.open(); // 打开弹窗  
			},
			close() {
				this.$refs.popup.close(); // 关闭弹窗  
				this.$emit("update:visible", false); // 更新父组件状态  
			},
			// 获取部门列表  
			async getDeptList() {  
			        // 确保 businessType 有效且没有调用多个空请求  
			        if (!this.businessType) return;  
			
			        console.log(this.businessType);  
			        try {  
			            const response = await selectDeptTree(this.businessType);  
			            console.log("获取部门列表", response.data);  
			            this.departments = response.data; // 更新部门列表  
			        } catch (error) {  
			            console.error("获取部门列表失败", error);  
			        }  
			    }, 
			handleDepartmentChange(e) {
				const index = e.detail.value;
				this.submitFormData.department = this.departments[index].deptName;
				
				selectUserByDeptId(this.departments[index].deptId).then(response => {
					this.users = response.data;
				});

			},
			getUsersByDepartment(deptId) {
				// 根据部门 ID 获取用户列表的逻辑，请添加相应的 API 调用  
				// 示例：  
				// selectUsersByDept(deptId).then(response => {  
				//     this.users = response.data;  
				// }).catch(error => {  
				//     console.error("获取用户列表失败", error);  
				// });  
			},
			handlePersonSelect(e) {  
			  const index = e.detail.value; // 从 picker 获取用户选择的索引  
			  const person = this.users[index]; // 通过索引找到所选用户  
			  if (!person) return;  
			
			  const ccName = selectCcName(this.submitFormData.department);   
			
			  // 添加到已选列表  
			  this.selectedPersons.push({  
			    userId: person.userId,  
			    nickName: person.nickName,  
			    deptName: this.submitFormData.department,  
			    taskId: this.taskId,  
			    ccName: ccName,  
			    toExamineType: this.toExamineType,  
			    submitForm: this.submitForm,  
			  });   
			console.log(this.selectedPersons)
			console.log('console.log(this.selectedPersons)')
			  // 清空选择，只需指定 ccPerson 的值，如下代码也可以去掉  
			  this.submitFormData.ccPerson = '';  
			},
			removeSelectedPerson(index) {
				this.selectedPersons.splice(index, 1);
			},
			// 确认提交  
			   submitConfirmed() {  
			     if (this.selectedPersons.length === 0) {  
			       // 使用 uni.showToast 显示提示信息  
			       uni.showToast({  
			         title: '请选择至少一个抄送人',   
			         icon: 'none' // 显示状态的图标为 none，它只是文本  
			       });  
			       return;  
			     }  
			   
			     // 处理提交逻辑  
			     console.log('已选抄送人:', this.selectedPersons);  
			   
			     toExamine(this.selectedPersons).then((response) => {  
			         console.log("抄送功能返回response", response);  
			         uni.showToast({  
			           title: '抄送完成请等待审批',  
			           icon: 'success' // 成功的提示  
			         });  
			         this.$emit("confirm", this.submitFormData); // 提交数据给父组件  
			         this.close(); // 关闭弹窗  
			     }).catch(error => {  
			         console.error("抄送提交失败", error);  
			         uni.showToast({  
			           title: '抄送失败，请重试',  
			           icon: 'none'  
			         });  
			     });  
			   },
		},
	};
</script>

<style>
	.dialog-container {
		padding: 20px;
		/* 增加内边距，使内容不紧贴边缘 */
		background-color: #fff;
		/* 背景色 */
	}

	.dialog-body {
		padding: 0;
		/* 移除内边距 */
	}

	.form-item {
		margin-bottom: 15px;
		/* 每个表单项之间的间距 */
	}

	.form-label {
		font-size: 16px;
		/* 布局更适应的字体大小 */
		color: #333;
		/* 深色文本，更易于阅读 */
		display: block;
		margin-bottom: 5px;
	}

	.picker {
		border: 1px solid #07c160;
		/* 突出边框颜色 */
		padding: 10px;
		border-radius: 4px;
		/* 改变边角形状 */
		font-size: 16px;
		/* 字体大小 */
		line-height: 1.5;
		/* 行高 */
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		padding: 5px 0;
		/* 增加上下内边距 */
	}

	.person-tag {
		background-color: #f0f0f0;
		padding: 5px 10px;
		border-radius: 15px;
		margin-right: 5px;
		/* 标签间距 */
		font-size: 14px;
		/* 调整字体大小 */
	}

	.tag-content {
		font-size: 14px;
		/* 保持一致性 */
	}

	.close-icon {
		margin-left: 5px;
		cursor: pointer;
		font-size: 16px;
		/* 增大关闭图标的字体 */
		color: #ff4c4c;
		/* 红色，用于关闭 */
	}

	/* 弹窗底部 */
	.dialog-footer {
		display: flex;
		justify-content: space-between;
		/* 使用空白填充按钮 */
		padding: 10px 0;
	}

	.dialog-button {
		flex: 1;
		/* 平分空间 */
		height: 45px;
		/* 按钮高度 */
		font-size: 16px;
		border-radius: 4px;
		/* 边角圆化 */
	}

	.cancel {
		background-color: #ffffff;
		/* 背景颜色 */
		border: 1px solid #ddd;
		/* 边框 */
		color: #333;
		/* 文本颜色 */
	}

	.confirm {
		background-color: #007aff;
		/* 确认按钮的蓝色 */
		color: #ffffff;
		/* 确认按钮文本颜色 */
	}
</style>
